<template>
  <div class="chooser-wrap">
    <ul class="chooser-items">
      <li class="chooser-item"
      :class="{active: currentIndex === index}"
      @click="select(index)"
      v-for="(item, index) in items">
        {{item.text}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        currentIndex: this.activeIndex
      };
    },
    props: {
      items: {
        type: Array,
        default: function () {
          return [];
        }
      },
      activeIndex: {
        type: Number,
        default: 0
      },
      multi: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      select (index) {
        if (this.currentIndex !== index) {
          this.currentIndex = index;
          this.$emit('on-choose', this.items[index]);
        }
      }
    },
    beforeCreate: function () {
    },
    created: function () {
    },
    mounted: function () {
    }
  };
</script>
<style>
  .chooser-wrap{
    display: inline-block;
    text-align: center;
  }

  .chooser-wrap>
  .chooser-items{
    font-size: 0;
  }

  .chooser-wrap>
  .chooser-items>
  li{
    display: inline-block;
    padding: 0 10px;
    margin-right: 5px;
    border: 1px solid rgba(227, 227, 227, 1);
    border-radius: 3px;
    line-height: 27px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
  }

  .chooser-wrap>
  .chooser-items>
  .active{
    color: white;
    background-color: rgba(79, 192, 141, 1);
  }
</style>
